<template>
	<view>
		<view class="container">
			<view class="invitebox">
				<view class="invitedetail">
					<view class="itemdetail">
						<view>成功邀请（人）</view>
						<text style="color: #FF0000;">{{invitemen}}</text>
					</view>
					<view class="itemdetail">
						<view>我的邀请码</view>
						<text style="color: #FF0000;">{{userinfo.recommend_id}}</text>
					</view>
				</view>
				<view class="invitebutton" @click="invitefriend">立即邀请好友</view>
			</view> 
			<!--进度-->
			<view class="progress">
				<view class="progresshead"></view>
				<view class="progressinfo">
					<view   :class="['iteminfo',item.status>1?'completebg':'']" v-for="(item,index) in datainfo" :key="index">
						<image :src="item.ico" mode="widthFix"></image>
						<view class="itembox">
							<view class="boxprogress">
								<view class="fontinfo">{{item.title}}<text style="color: #eb9b13;">{{item.description}}</text></view>
								<view :class="['button',item.status>0?'alredybutton':'']" @click="receivecoupon(index)" v-if="item.status<2">{{promotestatus[item.status]}}</view>
								<image v-else src="/static/image/confirms_selectd.png" style="width: 45rpx;height:45rpx" mode="aspectFill"></image>
							</view>
							<view class="boxprogress marginprogress">
								<view class="probar"></view>
								<!--完成进度-->
								<view class="prosuc" :style="{width: item.wprogress}"></view>
								<view style="color: #b1b1b1;">({{item.count}}/{{item.point}})</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!--打折规则-->
			<!-- <view class="rule">
				<view class="ruletitle">邀请好友打折规则</view>
				<view class="rulecontent">
					<text>邀请5个新用户，可在话费充值界面享受话费95折优惠。</text>
					<text>邀请10个新用户，可在话费充值界面享受话费9折优惠。</text>
					<text>邀请20个新用户，可在话费充值界面享受话费8折优惠。</text>
					<text>邀请30个新用户，可在话费充值界面领取100~500元话费充值券，立领立充（话费券可在我的奖品中查看使用）</text>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	/**
	 * 邀请好友进度
	 */
	export default {
		props: {
			userinfo: {
				type: Object,
				default: {}
			}
		},

		data() {
			return {
				promotestatus: ['未完成', '去领取', '已领取'],
				datainfo: [],
				invitemen: 0, //成功邀请的人数
			}
		},
		created() {
			this.initspeed();
		},
		methods: {
			invitefriend() {
				uni.$emit('invitemyfriend', true);
			},
			initspeed() {
				this.$HttRequest({
					url: '/promote2/detail',
					param: ''
				}).then((res) => {
					if (res.status === 10000) {
						this.datainfo = res.data.list
						//计算进度
						this.datainfo.map((item, index) => {
							this.datainfo[index].wprogress = 330 * (item.count / item.point) + 'rpx'
						})
						//console.log(this.datainfo)
						this.invitemen = res.data.success;
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
			},
			//领取卡券
			receivecoupon(index) {
				let coupon = this.datainfo[index];
				//console.log(coupon)
				if (coupon.status == 1) {
					this.$HttRequest({
						url: '/promote2/receive',
						param: {
							id: coupon.id
						}
					}).then((res) => {
						if (res.status === 10000) {
							this.datainfo = res.data.list
							//计算进度
							this.datainfo.map((item, index) => {
								this.datainfo[index].wprogress = 330 * (item.count / item.point) + 'rpx'
							})
							//console.log(this.datainfo)
							this.invitemen = res.data.success;
							this.$ShowMsg('卡券领取成功~')
						} else {
							this.$ShowMsg(res.message)
						}
					}).catch((error) => {
						//异常错误
						this.$ShowMsg('statusCode：' + error.errMsg);
					})
				} else if (coupon.status == 2) {
					this.$ShowMsg('您已领取过此奖励~')
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		height: auto;
		width: 90%;
		margin: 0 auto;

		.rule {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-size: 28rpx;
			margin-bottom: 40rpx;

			.ruletitle {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 35rpx;
				font-weight: bold;
				color: $uni-color-primary;
				margin-bottom: 20rpx;
				letter-spacing: 1rpx;
			}

			.rulecontent {
				flex: 1;
				background-color: #e4f0fc;
				display: flex;
				justify-content: center;
				align-items: center;
				color: $uni-color-primary;
				padding: 30rpx 40rpx;

				flex-direction: column;
				border-radius: 20rpx;

				text {
					margin: 10rpx 0;
				}
			}
		}

		.progress {
			flex: 1;
			margin: 30rpx 0;

			.progresshead {

				background-color: $uni-color-primary;
				border-radius: 50rpx;
				height: 40rpx;
				position: relative;
			}

			.progresshead:after {
				width: 95%;
				background-color: #0a66c1;
				content: '';
				position: absolute;
				height: 20rpx;
				border-radius: 50rpx;
				left: 15rpx;
				top: 12rpx;
			}

			.progressinfo {
				position: relative;
				left: 25rpx;
				top: -18rpx;
				width: 92%;
				background-color: #dbecff;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				// padding: 20rpx;
				font-size: 25rpx;
				font-weight: bold;

				.iteminfo {
					margin: 30rpx 0;
					width: 90%;
					background-color: #fff;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					border-radius: 30rpx;
					padding: 20rpx 0;

					image {
						width: 90rpx;
						margin: 0 15rpx;
					}

					.itembox {
						display: flex;
						justify-content: center;
						align-items: flex-start;
						flex-direction: column;
						width: 75%;
						
						.boxprogress {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;

							position: relative;

							.fontinfo {
								width: 70%;

							}

							.button {
								width: 110rpx;
								height: 40rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								background-color: #b5b5b5;
								color: #fff;
								border-radius: 30rpx;

							}

							.alredybutton {
								background: linear-gradient(to top, #1769dd, #378aff)
							}

							.probar {
								width: 330rpx;
								height: 15rpx;
								background-color: #eee;
								border-radius: 30rpx;
							}

							.prosuc {
								position: absolute;
								height: 15rpx;
								border-radius: 30rpx;
								background-color: $uni-color-primary;
								bottom: 10rpx;
							}
						}
						
						.marginprogress {
							margin-top: 8rpx;
						}
					}
				}
				.completebg{
					//background-color: #eff6ff;
					border: 1rpx solid #a5caff;
					box-shadow:  0 0 15rpx #91befe;
				}
			}
		}


		.invitebox {
			background-color: #e4f0fc;
			border-radius: 20rpx;
			flex: 1;
			padding: 30rpx 50rpx;

			.invitedetail {
				flex: 1;
				padding: 50rpx 0;
				background-color: #fff;
				border-radius: 50rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.itemdetail {
					color: $uni-color-primary;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					font-weight: bold;
					font-size: 30rpx;

					text {
						margin-top: 8rpx;
					}
				}
			}

			.invitebutton {
				margin: 30rpx auto;
				margin-bottom: 10rpx;
				flex: 1;
				height: 85rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				font-weight: bold;
				border-radius: 50rpx;
				color: #fff;
				background-color: $uni-color-primary;
			}
		}
	}
</style>
